<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>琥珀</title>
    <link rel="stylesheet" href="https://dn-amber-css.qbox.me/jquery.fullPage.css">
    <script src="https://dn-amber-js.qbox.me/jquery-2.1.3.min.js"></script>
    <script src="https://dn-amber-js.qbox.me/jquery-ui-1.10.3.min.js"></script>
    <script src="https://dn-amber-js.qbox.me/jquery.fullPage.min.js"></script>
    <style>
        html{
            font-size: 62.5%;
        }
        .section {text-align:center; font:4rem "Microsoft Yahei";color:#7bbfea;}
        .section h4:hover{
            text-shadow: 2px 2px 4px #afb4db;
            cursor: pointer;
        }
        #menu { margin: 0; padding: 0; position: fixed; right: 10px; top: 40%; list-style-type: none; z-index: 70;}
        #menu li { font-size:1.4rem;border-radius: 10px;}
        #menu a {border-radius: 10px; float: left; padding: 10px; background-color: #fff; color: #333; text-decoration: none;margin:  10px 0 0 0;}
        #menu .active a {background-color: #72baa7;}
        /*amber头像*/
        .amber-head{
            border:3px solid white;
            width: 140px;
            height: 140px;
            border-radius:75px ;
            cursor: pointer;
        }
        @-webkit-keyframes rotate {
             from {-webkit-transform:rotate(0deg) scale(1.08);;}
             to {-webkit-transform:rotate(360deg) scale(1.08);;}
         }
        .amber-head:hover{
            border:3px solid #a1a3a6;
            -webkit-animation-name: rotate;
            -webkit-animation-duration: 1.5s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }
        .amber-info{
            line-height: 70px;
            font-size: 40px;
        }
    </style>
    <script>
        $(document).ready(function() {
            $(".amber-head:eq(0)").click(function(){
                window.open("https://dn-amber.qbox.me/my_profile.html");
            });
            $('#content').fullpage({
                sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
                anchors: ['page1', 'page2', 'page3', 'page4'],
                loopBottom: true,
                /*绑定菜单*/
                menu: '#menu',
                /*允许字体缩放*/
                resize:true,
                afterLoad: function(anchorLink, index){

                    if(index == 1){
                        $(".amber-info:eq(1)").css({
                            'display':'none'
                        }).animate({width:"0"},100);
                    }
                    if(index == 2){
                        $(".amber-info:eq(1)").css({
                            'display':'block'
                        }).animate({width:"100%"},600);
                    }
                    if(index == 3){
                        $(".amber-info:eq(1)").css({
                            'display':'none'
                        }).animate({width:"0"},100);
                    }
                }
         });
            //背景

        });
    </script>

</head>

<body>
<div id="content">
    <ul id="menu">
        <li data-menuanchor="page1" class="active"><a href="#page1"></a></li>
        <li data-menuanchor="page2"><a href="#page2"></a></li>
        <li data-menuanchor="page3"><a href="#page3"></a></li>
        <li data-menuanchor="page4"><a href="#page4"></a></li>
    </ul>
    <div class="section" style="background-image: url('https://dn-amber-images.qbox.me/bgc.png');background-size: cover;">
        <div id="tes"> </div>
        <img src="https://dn-amber-images.qbox.me/header.jpg" class="amber-head" >
        <h4>我是琥珀</h4>
        <p class="amber-info" >95双子男<br/>Web前端工程师、全栈开发尝试者<br/></p>

    </div>
    <div class="section" style="background-image: url('https://dn-amber-images.qbox.me/bgb.png');background-size: cover;">
        <p class="amber-info">Html5、Css3</p>
        <img src="https://dn-amber-images.qbox.me/html5.png" class="amber-head">
        <img src="https://dn-amber-images.qbox.me/css3.png" class="amber-head">
    </div>
    <div class="section" style="background-image: url('https://dn-amber-images.qbox.me/bge.png');background-size: cover;">
        <p class="amber-info">BootStrap、jQuery、zepto<br/></p>
        <img src="https://dn-amber-images.qbox.me/bt.jpg" class="amber-head">
        <img src="https://dn-amber-images.qbox.me/jq.png" class="amber-head">
        <img src="https://dn-amber-images.qbox.me/zepto.png" class="amber-head">
    </div>
    <div class="section" style="background-image: url('https://dn-amber-images.qbox.me/bga.png');background-size: cover;">
        <p class="amber-info">Angular<br/>Ajax</p>
        <img src="https://dn-amber-images.qbox.me/angular.png" class="amber-head">
        <img src="https://dn-amber-images.qbox.me/ajax.png" class="amber-head">
        <p class="amber-info">邮箱:alpha.xiongmao@foxmail.com</p>
    </div>

</div>


</body>
</html>